<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="/html/axios.min.js"></script>

    <script>
        function $(id) {
            return document.getElementById(id);
        }

        window.onload = async function () {
           await axios.get("/country/findAll",null).then(resp =>{
                var str = "";
                resp.data.forEach(e => {
                    str += `<option value="${e.id}">${e.name}</option>`;
                    $("countrySelect").innerHTML = str;
                })
            });
            findCity();
        }

        function findCity() {

            var paramObj = new URLSearchParams();
            paramObj.append("countryId",$("countrySelect").value);
            // var countryId = $("countrySelect").value;
            axios.post("/city/findByCountry",paramObj).then(resp =>{
                var cityStr = "";
                resp.data.forEach(e =>{
                    cityStr += `<option>${e.name}</option>`;
                    $("citySelect").innerHTML = cityStr;
                });
            })
        }

    </script>
</head>
<body>

    <select id="countrySelect" onchange="findCity()"></select>
    <select id="citySelect"></select>

</body>
</html>